<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>标记聚类图</title>
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="cluster" src="./static/libs/include-leaflet-local.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = L.map('map', {
            crs: L.CRS.EPSG3857
        }).setView([29.578285, 106.563777], 3);

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' +
            'sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw', {
                attribution: '<a href="#">MapGIS</a>',
                maxZoom: 18,
                id: 'mapbox.dark'
            }).addTo(map);

        var geosjon;

        $.get('./static/data/geojson/point.json', function (json) {
            geojson = json;
            var options = {
                field: 'mapgis_style',
                title: 'name',
                zoom: 6
            }

            var clusterLayer = new L.zondy.MarkerClusterLayer(map, geojson, options).addTo(map);
            // clusterLayer.remove();
        });
    </script>


</body>

</html>